import { Space, Table, Tag } from "antd";
import { useEffect, useState } from "react";
const ChooseProductBox = (props) => {
  let { productArr, getProductInfo } = props;
  // let [showData, setShowData] = useState({});
  const columns = [
    {
      title: "商品图片",
      dataIndex: "productUrl",
      key: "productUrl",
      render: (_, record) => (
        <Space>
          <img src={"/api" + record.productUrl} alt="" className="productImg" />
        </Space>
      ),
    },
    {
      title: "单价",
      dataIndex: "productPrice",
      key: "productPrice",
    },
    {
      title: "颜色",
      dataIndex: "productColor",
      key: "productColor",
    },
    {
      title: "尺码",
      dataIndex: "productRule",
      key: "productRule",
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      getProductInfo(selectedRows[0]);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.name,
    }),
  };
  return (
    <Table
      rowSelection={{
        type: "radio",
        ...rowSelection,
      }}
      dataSource={productArr}
      columns={columns}
      pagination={false}
    />
  );
};

export default ChooseProductBox;
